<template>
    <div class="order-contain">
        <!-- <div class="header bg-grey">
            <div class="header-left">
                <div class="back" @click="handleReturn">
                    <i class="i-left"></i>
                </div>
            </div>
            <div class="header-middle m-l-12"><span class="font-black">确认订单</span></div>
            <div class="header-right"></div>
        </div> -->
        <div class="content">
            <div class="order-address ">
                <div class="order-address__header" v-if="hasDefault===1" @click="handleChooseAddr">
                    <i class="order-address__i"></i>
                    <div class="order-address__content">
                        <div class="order-address__user">{{addrDetail.userName}}: <span class="phone">{{addrDetail.telNumber}}</span></div>
                        <div class="order-address__detail">{{addrDetail.addrInfo}}</div>
                    </div>
                    <i class="order-address__icon_right"></i>
                </div>
                <div class="order-address__header" v-else @click="handleChooseAddr">
                    <i class="order-address__i"></i>
                    <div class="order-address__content">
                        <div class="order-address__default">请选择收货地址</div>
                    </div>
                    <i class="order-address__icon_right"></i>
                </div>
            </div>
            <div class="order-goods">
                <div class="order-goods__header">
                    <a class="order-goods__thumb"><img :src="goods.primary_pic_url" class="van-card__img"></a>
                    <div class="order-goods__content">
                        <div class="order-goods__title">商品名称:</div>
                        <div class="order-goods__desc">{{goods.name}}</div>
                        <div class="order-goods__bottom">
                            <div class="order-goods__price"><span>价格：</span><span>{{goods.retail_price}}</span></div>
                            <div class="order-goods__num"><van-stepper v-model="num" min="1" max="100" integer input-width="20px"/></div>
                        </div>
                    </div>
                </div>
            </div>
            <div  class="order-submit-bar">
                <div class="order-submit-bar__bar">
                    <div class="order-submit-bar__text">
                        <span>合计：</span>
                        <span class="order-submit-bar__price">￥{{calcTotal(goods.retail_price)}}</span>
                    </div>
                    <button  class="order-button" @click="handleSubmit"><span class="van-button__text">提交订单</span></button>
                </div>
            </div>
        </div>
        <van-action-sheet v-model="isPay" title="确认付款"   @cancel="handleCancel">
            <pay :totalPrice="calcPayPrice(goods.retail_price)" :orderId="orderId" :channelId = channelId ></pay>
        </van-action-sheet>
    </div>
</template>

<script>
import pay from "@/components/pay"    
import { getGoodsDetail,createOrder,orderPay } from "@/api/goods"
import { getAddressDetail,getAddressList } from "@/api/user";
import { url, autoLogin } from "@/utils";
import { Dialog,Toast } from 'vant'
export default {
    name: "order",
    components: { pay },
    data() {
        return {
            data:{
                id: "",
            },
            hasDefault: 0,
            isPay: false,
            pay_type: "2",
            addressId: 0,
            excludeArea: ['海南省','香港特别行政区','澳门特别行政区','台湾省', '新疆维吾尔自治区','西藏自治区','青海省'],
            area: '',
            icon: {
                normal: require('@/assets/images/radio-normal.png'),
                active: require('@/assets/images/radio-active.png')
            },
            param:{
                id: ''
            },
            orderId: '',
            num: 1,
            addrDetail:{
                userName: "",
                postalCode: "",
                telNumber: "",
                addrInfo: ""
            },
            channelId: 0,
            goods: {
                goods_sn: "",
                goods_id: "",
                name: "",
                brief: "",
                retail_price: "",
                changePayment: 0,
                primary_pic_url: "",
                isLiquid: 0
            }
        };
    },
    created() {
        autoLogin()
        const userId = localStorage.getItem("userId");
        const token = localStorage.getItem("token");
        this.param.id = this.$route.params.id;
        this.getDetail();
        const addr_id = this.$store.state.common.addrChooseId
        if(addr_id){
            this.data.id = addr_id
            this.addressId = addr_id
        }
        this.getAddrDetail();
    },
    methods:{
        handleReturn() {
            this.$router.go(-1)
        },
        getDetail() {
            getGoodsDetail(this.param).then(response => {
                const data = response.data.info;
                if( data ){
                    this.goods.goods_sn = data.goods_sn
                    this.goods.goods_id = data.goods_id
                    this.goods.name = data.name
                    this.goods.retail_price = (data.retail_price*1).toFixed(2)
                    this.goods.primary_pic_url = data.primary_pic_url
                    this.goods.changePayment =(data.changePayment*1).toFixed(2)
                    this.goods.isLiquid = data.isLiquid
                    this.channelId = data.channelId

                }
            })
        },
        getAddrDetail(){
            getAddressDetail(this.data).then(response =>{
                if(response.data) {
                    this.hasDefault = 1
                    this.addressId =  response.data.id;
                    this.addrDetail.userName = response.data.userName;
                    this.addrDetail.telNumber = response.data.telNumber;
                    this.addrDetail.postalCode = response.data.postalCode;
                    this.addrDetail.addrInfo  = response.data.provinceName + response.data.cityName + response.data.countyName  + response.data.streetName + response.data.detailInfo;
                    this.area = response.data.provinceName
                }
            })

        },
        handleChooseAddr() {
            this.$store.commit("SET_ISCHOOSE",1)
            this.$router.push('/address/list')
        },
        formatPrice(price) {
            return (price*1).toFixed(2);
        },
        calcTotal(price){
            return (this.num * price).toFixed(2);
        },
        calcPayPrice(price){
            return this.num * price;
        },
        calcchangePayment(price){
            return this.num * price;
        },
        handleSubmit() {
            const data = {}
            if(this.addressId == 0){
                Dialog.alert({
                    title: "",
                    message: "请选择收货地址"
                }).then(() => {
                    this.$router.push("/address/list")
                })
                return
            }
            if(this.goods.isLiquid === 1 && in_array(this.area,this.excludeArea)) {
                Dialog.alert({
                    title: "",
                    message: "您所在的地区暂时无法送达"
                }).then(() => {
                })
                return
            }

            data.goodsId = parseInt(this.param.id);
            data.goodsNumber = this.num;
            data.addressId = this.addressId;
            data.integral  = this.integral;
            createOrder(data).then(response =>{
                if(response.all_order_id){
                    this.orderId = response.orderId;
                    this.isPay = true
                }
            })
        },
        handleCancel(){
            this.isPay = false
            if(this.channelId === 9) {
                this.$router.push('/user/orderlist?channelId=9')
            } else {
                this.$router.push('/user/orderlist')
            }
        }
    }
}
</script>
